<template>
  <!-- 实时访问 -->
  <div class="actual-total">
    <div class="expect-total">
      可预约总量
      <i>999999</i>
      人
    </div>
    <div class="actual-total">
      <span class="actual-item" v-for="(item, index) in people" :key="index">
        {{ item }}
      </span>
    </div>
  </div>
  <div class="charts" ref="charts"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { ref, onMounted } from 'vue'
let people = ref('215908人')
//水球图拓展插件

//获取节点
let charts = ref()
onMounted(() => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)
  // mycharts.setOption({
  //   // backgroundColor: "#050038",
  //   title: {
  //     text: `总完成`,
  //     left: 'center',
  //     top: '100',
  //     textStyle: {
  //       fontWeight: 'normal',
  //       fontSize: 20,
  //       color: 'rgb(0,0,0)',
  //     },
  //     subtext: `${60}%`, //副标题
  //     subtextStyle: {
  //       fontWeight: 'bold',
  //       fontSize: 40,
  //       color: 'rgb(0,0,0)',
  //     },
  //   },

  //   series: [
  //     {
  //       type: 'liquidFill', // 图表类型
  //       radius: '80%',
  //       center: ['50%', '50%'],
  //       data: [60 / 100, 60 / 100, 60 / 100], // data个数代表波浪数
  //       backgroundStyle: {
  //         borderWidth: 1,
  //         color: '#F4F9FF',
  //       },
  //       label: {
  //         normal: {
  //           show: false, //不显示label  用副标题代替了
  //           formatter: (0.6 * 100).toFixed(0) + '%',
  //           textStyle: {
  //             fontSize: 38,
  //             color: 'black',
  //           },
  //         },
  //       },
  //       color: [
  //         //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
  //         {
  //           type: 'linear',
  //           x: 0,
  //           y: 0,
  //           x2: 0,
  //           y2: 1,
  //           colorStops: [
  //             {
  //               offset: 1,
  //               color: 'rgba(255,255,255,1)',
  //             },
  //             {
  //               offset: 0,
  //               color: 'rgba(103,205,251,1)',
  //             },
  //           ],
  //           globalCoord: false,
  //         },
  //         {
  //           type: 'linear',
  //           x: 0,
  //           y: 0,
  //           x2: 0,
  //           y2: 1,
  //           colorStops: [
  //             {
  //               offset: 1,
  //               color: 'rgba(187,248,252,0.5)',
  //             },
  //             {
  //               offset: 0,
  //               color: 'rgba(30,134,245,1)',
  //             },
  //           ],
  //           globalCoord: false,
  //         },
  //         {
  //           type: 'linear',
  //           x: 0,
  //           y: 0,
  //           x2: 0,
  //           y2: 1,
  //           colorStops: [
  //             {
  //               offset: 1,
  //               color: 'rgba(180,251,255,0.66)',
  //             },
  //             {
  //               offset: 0,
  //               color: 'rgba(128,122,254,0.66)',
  //             },
  //           ],
  //           globalCoord: false,
  //         },
  //       ],
  //       outline: {
  //         show: false,
  //       },
  //     },
  //     //外层线
  //     {
  //       type: 'pie',
  //       center: ['50%', '50%'],
  //       radius: ['93%', '93%'], //外层线粗细
  //       hoverAnimation: false,
  //       label: { show: false },
  //       silent: true,
  //       data: [100],
  //       itemStyle: {
  //         borderWidth: 2,
  //         borderType: [8, 10],
  //         borderDashOffset: 15,
  //         borderColor: '#31d8d5',
  //         color: '#11144e',
  //         borderCap: 'round',
  //       },
  //     },
  //     //进度线
  //     {
  //       type: 'pie',
  //       center: ['50%', '50%'],
  //       startAngle: 0, //起始角度
  //       radius: ['90%', '95%'], //进度线粗细
  //       hoverAnimation: false,
  //       silent: true,
  //       data: [
  //         {
  //           name: '',
  //           value: 60, //进度
  //           labelLine: {
  //             show: false,
  //           },
  //           itemStyle: {
  //             color: {
  //               type: 'linear',
  //               x: 0,
  //               y: 0,
  //               x2: 1,
  //               y2: 2,
  //               colorStops: [
  //                 // !! 在此添加渐变过程色 !!
  //                 { offset: 0, color: '#33E2ED' },
  //                 { offset: 1, color: '#807AFE' },
  //               ],
  //             },
  //           },
  //           emphasis: {
  //             labelLine: {
  //               show: false,
  //             },
  //             itemStyle: {
  //               // color: "#5886f0"
  //             },
  //           },
  //         },
  //         {
  //           //画剩余的刻度圆环
  //           name: '',
  //           value: 100 - 40,
  //           itemStyle: {
  //             color: 'rgba(0,0,0,0)',
  //           },
  //           label: {
  //             show: false,
  //           },
  //           labelLine: {
  //             show: false,
  //           },
  //           emphasis: {
  //             labelLine: {
  //               show: false,
  //             },
  //             itemStyle: {
  //               color: '#050038',
  //             },
  //           },
  //         },
  //       ],
  //     },
  //   ],
  // })

  //设置实例的配置项
  mycharts.setOption({
    title: [
      {
        text: (1 * 100).toFixed(0) + '%',
        left: '49%',
        top: '35%',
        textAlign: 'center',
        textStyle: {
          fontSize: '16',
          fontWeight: 'normal',
          color: '#ffffff',
          align: 'center',
          textBorderColor: 'rgba(0, 0, 0, 0)',
          textShadowColor: '#000',
          textShadowBlur: 0,
          textShadowOffsetX: 0,
          textShadowOffsetY: 1,
        },
      },
      {
        text: '预约量',
        left: '49%',
        top: '25%',
        textAlign: 'center',
        textStyle: {
          fontSize: '15',
          fontWeight: 'normal',
          color: '#ffffff',
          align: 'center',
          textBorderColor: 'rgba(0, 0, 0, 0)',
          textShadowColor: '#000',
          textShadowBlur: 0,
          textShadowOffsetX: 0,
          textShadowOffsetY: 1,
        },
      },
    ],
    grid: {
      top: '0',
      left: '0px',
      right: '0px',
      bottom: '0',
      containLabel: true,
    },
    polar: {
      radius: ['75%', '85%'],
      center: ['50%', '50%'],
    },
    angleAxis: {
      max: 100,
      clockwise: false,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      startAngle: 180,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: 'liquidFill',
        radius: '70%',
        z: 2,
        center: ['50%', '50%'],
        data: [0.4, 0.4, 0.4],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#35FAB6' },
              { offset: 1, color: 'rgba(40, 209, 247,0.3)' },
            ],
            global: false,
          },
        },
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2,
            borderColor: '#31d8d5',
            shadowBlur: 20,
            shadowColor: '#50c1a7',
          },
        },
        label: {
          show: false,
        },
        backgroundStyle: {
          borderWidth: 1,
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              { offset: 0, color: '#0D2648' },
              { offset: 0.8, color: '#0D2648' },
              { offset: 1, color: '#228E7D' },
            ],
            global: false,
          },
        },
      },
      {
        type: 'pie',
        radius: ['80%', '80%'],
        center: ['50%', '50%'],
        z: 1,
        label: { show: false },
        silent: true,
        itemStyle: {
          borderWidth: 2,
          borderType: [10, 10],
          borderDashOffset: 15,
          borderColor: '#31d8d5',
          color: '#11144e',
          borderCap: 'round',
        },
        data: [100],
      },
      {
        type: 'bar',
        data: [50],
        z: 10,
        coordinateSystem: 'polar', //使用极坐标系
        roundCap: true, //是否在环形柱条两侧使用圆弧效果。
        color: '#31d8d5',
      },
    ],
  })
})
</script>
<style lang="scss" scoped>
.actual-total {
  box-sizing: border-box;
  position: relative;
  display: flex;
  // align-items: center;
  justify-content: flex-end;
  margin-right: 4px;
  margin-top: 5px;
  .actual-item {
    background: url('../../images/total.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 50px;
    width: 52px;
    height: 50px;
    font-family: MetroDF;
    font-size: 32px;
    color: #66ffff;
  }
  .expect-total {
    position: absolute;
    top: -30px;
    right: 5px;
    font-size: 14px;
    color: #ffffff;
    i {
      font-style: normal;
      font-style: oblique;
      color: #ff8100;
    }
  }
}
.charts {
  width: 100%;
  height: calc(100% - 50px);
}
</style>
